<template>
  <div class="login">
    <div class="headerdiv">
      <p>🐨考拉海购</p>
    </div>
        <van-form @submit="onSubmit">
        <van-field
            v-model="username"
            name="username"
            label="用户名"
            placeholder="请输入用户名"
            :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
            v-model="password"
            type="password"
            name="password"
            label="密码"
            placeholder="请输入密码"
            :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin: 16px;">
            <van-button round block type="info" native-type="submit" class="tijiao">
            提交
            </van-button>
        </div>
        </van-form>
        <van-cell title="其他登录方式 >" @click="showShare = true" />
          <van-share-sheet
            v-model="showShare"
            title="其他登录方式"
            :options="options"
            @select="onSelect"
          />
      <div class="footerdiv">注册/登录即代表同意 <a href="">隐私政策</a>和<a href="">服务条款</a></div>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import { Toast } from 'vant'
export default {
  name: 'Login',
  data () {
    return {
      username: '',
      password: '',
      showShare: false,
      options: [
        { name: '微信', icon: 'wechat' },
        { name: '微博', icon: 'weibo' },
        { name: '二维码', icon: 'qrcode' }
      ]
    }
  },
  created () {
    console.log(this.$route)
  },
  methods: {
    ...mapActions(['loginAsync']),
    onSubmit (values) {
      console.log('submit', values)
      this.loginAsync(values).then(res => {
        console.log('异步登录：', res)
        if (res.isLogin) { // 模拟登录成功，使用编程式导航跳转页面
          console.log(this.$route.params.to, '3')
          this.$router.push(this.$route.params.to)
        }
      })
    },
    onSelect (option) {
      Toast(option.name)
      this.showShare = false
    }
  }
}
</script>

<style lang="scss" scoped>
.login{
  margin-top:50px
}
.headerdiv{
  font-size: 30px;
  height: 50px;
  line-height: 50px;
  text-align: center;
}
.tijiao{
  background: #ff0f1f;
  border: none;
}
.footerdiv{
  position: fixed;
  bottom: 40px;
  left: 65px;
  color: #999;
  font-size: 12px;
  a{
    color: #999;
    margin: 5px 5px;
  }
}
</style>
